<template>
    <div class="hp-matchgame">
        <div class="game-item">
            <div class="header">
                <div class="tit">「发现真球友」粉丝数据</div>
                <div class="count">2324人参与</div>
            </div>
            <div class="content">
                <div class="desc">
                    <div class="desc-text">脚法精湛才华非凡，“足球先生”五夺金球奖，我们都爱梅西！</div>
                    <div class="desc-pk">PK</div>
                    <div class="desc-text">技术出众速度惊人突破犀利，C罗才是当今足坛第一人!</div>
                </div>
                <div class="desc">
                    <div class="desc-text">梅西真爱粉</div>
                    <div class="desc-count">
                        <div class="bg-3BCDF8"></div>
                        <div class="bg-B91212"></div>
                    </div>
                    <div class="desc-text" style="text-align: right;">C罗真爱粉</div>
                </div>
            </div>
            <div class="btn" @click="_navToPage">我要参与</div>
        </div>
        <div class="game-item">
            <div class="header">
                <div class="tit">「发现真球友」匹配数据</div>
                <div class="count">2324人参与</div>
            </div>
            <div class="content">
                <div class="desc">
                    <div class="desc-text">脚法精湛才华非凡，“足球先生”五夺金球奖，我们都爱梅西！</div>
                    <div class="desc-pk">PK</div>
                    <div class="desc-text">技术出众速度惊人突破犀利，C罗才是当今足坛第一人!</div>
                </div>
                <div class="desc">
                    <div class="desc-text">梅西真爱粉</div>
                    <div class="desc-count">
                        <div class="bg-3BCDF8"></div>
                        <div class="bg-B91212"></div>
                    </div>
                    <div class="desc-text" style="text-align: right;">C罗真爱粉</div>
                </div>
            </div>
            <div class="btn" @click="_navToPage">我要参与</div>
        </div>
        <div class="tip">已经有1113人找到了「真球友」，你还在等什么？</div>
    </div>
</template>
<script type="text/javascript">
    export default {
        methods: {
            _navToPage (url) {
                this.$router.push({
                    path: '/question'
                });
            }
        }
    }
</script>
<style lang="less" scoped>
    .game-item {
        margin-top: 50px;
    }
    .header {
        overflow: hidden;
        padding: 0 12px;
        .tit {
            font-size: 15px;
            float: left;
        }
        .count {
            font-size: 13px;
            float: right;
        }
    }
    .desc {
        display: flex;
        padding: 0 12px;
        margin:  14px 0;
    }
    .desc-text {
        flex: 1;
        font-size: 12px;
        line-height: 16px;
    }
    .desc-pk {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin: 0 10px;
        font-size: 14px;
        background-color: #D6D6D6;
        border-radius: 50%;
    }
    .desc-count {
        width: 200px;
        margin-top: 3px;
        overflow: hidden;
        .bg-3BCDF8 {
            float: left;
            width: 50%;
            height: 10px;
            background-color: #3BCDF8;
        }
        .bg-B91212 {
            float: right;
            width: 50%;
            height: 10px;
            background-color: #B91212;
        }
    }
    .btn {
        margin: 0 auto;
        width: 100px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background-color: #E3E3E3;
        font-size: 13px;
    }
    .tip {
        text-align: center;
        font-size: 12px;
        line-height: 60px;
    }
</style>
